<script setup lang="ts">
import {getFileExtension} from '@/utils'

const props = defineProps({
  url: {
    type: String,
    default: ''
  }
})
const getMediaType = (url: string) => {
  let type = '';
  switch (url) {
    case 'mp4':
      type = 'video';
      break;
    default:
      type = 'img'
  }
  return type;
}
const mediaType = ref('img')

onMounted(()=>{
  mediaType.value = getMediaType(getFileExtension(props.url))
})
</script>

<template>
  <div class="banner-media">
    <img :src="props.url" alt="" v-if="mediaType==='img'">
    <video muted autoplay="autoplay" loop="loop" v-else>
      <source :src="props.url" />
    </video>
  </div>
</template>

<style scoped lang="scss">
.banner-media {
  width: 100%;
  height: 100%;
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
</style>
